@import '../../../themes/mixins/link';
@import '../../../themes/mixins/loading-spinner';

.component {
  height: 100%;
  padding: 0 0 20px 20px;

  .headerWrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
    line-height: 1.38;
    margin: 0 0 0 -20px;
    padding: 10px 40px;
    position: relative;
    transition: box-shadow 0.25s ease-out;

    & > .title {
      color: var(--theme-staking-font-color-lighter);
      flex-grow: 1;
      font-family: var(--font-regular);
      font-size: 16px;
    }

    & > .actionButton {
      border-radius: 2px;
      display: flex;
      height: auto;
      padding: 7px 12px;
      width: auto;

      .actionLabel {
        line-height: 1.36;
        margin-right: 12px;
      }

      .downloadIcon {
        height: 11px;
        object-fit: contain;
        width: 11px;

        path {
          fill: var(--theme-button-flat-text-color);
        }
      }
    }
  }

  .headerWrapperWithShadow {
    box-shadow: 0 2.5px 10px 0 rgba(0, 0, 0, 0.25);
  }

  .contentWrapper {
    height: calc(100% - 53px);
    overflow-x: hidden;
    overflow-y: scroll;

    &::-webkit-scrollbar-track {
      margin-bottom: -20px;
      margin-top: -20px;
    }
  }

  .noRewardsLabel {
    color: var(--theme-staking-font-color-lighter);
    flex-grow: 1;
    font-family: var(--font-regular);
    font-size: 16px;
    text-align: center;
  }

  .note {
    align-items: flex-start;
    color: var(--theme-staking-font-color-lighter);
    display: flex;
    flex-direction: column;
    font-family: var(--font-regular);
    font-size: 14px;
    line-height: 1.43;
    padding: 10px 20px 0;

    p {
      margin-bottom: 3px;
    }

    button {
      font-size: 14px;
      margin-top: 3px;
      @include link(--theme-staking-link-color-light);

      &:hover {
        border-bottom: 1px solid var(--theme-staking-link-color);
        color: var(--theme-staking-link-color);

        svg {
          g {
            stroke: var(--theme-staking-link-color);
          }
        }
      }
    }
  }

  :global {
    .LoadingSpinner_component {
      .LoadingSpinner_icon svg path {
        fill: var(--theme-loading-spinner-color) !important;
      }
    }
  }

  .loadingSpinnerWrapper {
    margin: auto;
  }

  .exportingSpinnerWrapper {
    :global {
      .LoadingSpinner_component {
        &.LoadingSpinner_small {
          height: 19px;
          margin: 0;
          width: 19px;
        }
      }
    }
  }

  table {
    border-style: hidden;
    user-select: text;
    width: 100%;

    thead {
      background-color: var(--theme-staking-table-head-background-color);
    }

    tr,
    td,
    th {
      border: 1px solid var(--theme-staking-table-border-color);
    }

    th {
      color: var(--theme-staking-font-color-regular);
      cursor: pointer;
      font-family: var(--font-semibold);
      font-size: 14px;
      line-height: 1.14;
      padding: 14px 20px;
      text-align: left;

      &:hover {
        & > .sortIcon {
          opacity: 0.5;
          visibility: visible;
        }
      }

      & > .sortIcon {
        margin-left: 6px;
        visibility: hidden;

        & > svg {
          height: 7.5px;
          width: 7px;

          & > path {
            fill: var(--theme-staking-font-color-regular);
          }
        }

        &.ascending {
          & > svg {
            transform: rotateX(150deg);
          }
        }

        &.sorted {
          opacity: 1;
          visibility: visible;
        }
      }

      &.total,
      &.unspent {
        padding-right: 10px;
        text-align: right;
      }
    }

    td {
      color: var(--theme-staking-font-color-regular);
      font-family: var(--font-light);
      font-size: 14px;
      line-height: 1.3;
      padding: 14px 20px;
      position: relative;
      text-align: left;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;

      p {
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;

        .stakePoolReference {
          font-family: var(--font-medium);
        }
      }

      .syncingProgress {
        position: absolute;
        right: 22px;
        top: 10px;
        :global .LoadingSpinner_component.LoadingSpinner_medium {
          .LoadingSpinner_icon svg path {
            fill: var(--theme-loading-spinner-color);
            opacity: 0.3;
          }
        }
      }

      .copyAddress {
        cursor: pointer;
        display: flex;
        white-space: nowrap;
      }

      .copyIcon {
        cursor: pointer;
        margin-left: 6px;
        object-fit: contain;
        opacity: 0;

        & > svg {
          height: 10px;
          width: 8px;

          path {
            fill: var(--theme-icon-copy-address-color);
          }
        }
      }

      .actionExplorerLink {
        align-items: center;
        border-radius: 3px;
        display: flex;
        height: 16px;
        justify-content: center;
        line-height: 16px;
        margin-left: 15px;
        padding: 3px 8px;
        white-space: nowrap;
        width: auto;
      }

      .externalLink {
        font-size: 8px;
        font-weight: bold;
        line-height: 1.25;
        text-transform: uppercase;

        &:after {
          height: 8px !important;
          -webkit-mask-size: 8px, 8px !important;
          mask-size: 8px, 8px !important;
          width: 8px !important;
        }
      }

      &.rewardWallet {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &.rewardsAddress {
        min-width: 100px;

        > div {
          align-items: center;
          display: flex;
          justify-content: space-between;
        }

        .addressContainer {
          align-items: center;
          display: flex;

          .address {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 200px;

            &:hover {
              cursor: pointer;
            }

            @media screen and (min-width: 992px) {
              width: 297px;
            }
            @media screen and (min-width: 1024px) {
              width: 355px;
            }
            @media screen and (min-width: 1098px) {
              width: auto;
            }
          }

          &:hover {
            .copyIcon {
              opacity: 1;
            }
          }
        }
      }

      &.rewardTotal,
      &.rewardUnspent {
        padding-right: 23px;
        text-align: right;
      }
    }
  }
}
